<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/zns_style.css">
</head>
<body>
<div id="playimages" class="play">
    <ul class="big_pic">

        <div class="prev"></div>
        <div class="next"></div>

        <div class="text">加载图片说明...</div>
        <div class="length">计算图片数量...</div>

        <a class="mark_left" href="javascript:;"></a>
        <a class="mark_right" href="javascript:;"></a>

        <div class="bg"></div>
        <li style="z-index: 1"><img src="images3/1.jpg"></li>
        <li><img src="images3/2.jpg"></li>
        <li><img src="images3/3.jpg"></li>
        <li><img src="images3/4.jpg"></li>
        <li><img src="images3/5.jpg"></li>
        <li><img src="images3/6.jpg"></li>
    </ul>
    <div class="small_pic">
        <ul style="width:390px;">
            <li style="filter:alpha(opacity:1);opacity: 1"><img src="images3/1.jpg" /></li>
            <li><img src="images3/2.jpg" /></li>
            <li><img src="images3/3.jpg" /></li>
            <li><img src="images3/4.jpg" /></li>
            <li><img src="images3/5.jpg" /></li>
            <li><img src="images3/6.jpg" /></li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript">
    var oDiv = document.getElementById('playimages');
    var oBtnNext = getClass(oDiv,'next')[0];
    var oBtnPrev = getClass(oDiv,'prev')[0];
    var oMarkLeft = getClass(oDiv,'mark_left')[0];
    var oMarkRight = getClass(oDiv,'mark_right')[0];

    var oDivSmall = getClass(oDiv,'small_pic')[0];
    var oUlSmall = oDivSmall.getElementsByTagName('ul')[0];
    var aLiSmall = oUlSmall.getElementsByTagName('li');

    var oUlBig = getClass(oDiv,'big_pic')[0];
    var aLiBig = oUlBig.getElementsByTagName('li');

    var now = 0;
    var nowIndex = 2;

    oUlSmall.style.width = aLiSmall[0].offsetWidth*aLiSmall.length+'px';

    //左右移动
    oBtnPrev.onmouseover = oMarkLeft.onmouseover = function () {
        startMove(oBtnPrev,'opacity',100);
    };
    oBtnPrev.onmouseout = oMarkLeft.onmouseout = function () {
      startMove(oBtnPrev,'opacity',0);
    };
    oBtnNext.onmouseover = oMarkRight.onmouseover = function () {
      startMove(oBtnNext,'opacity',100);
    };
    oBtnNext.onmouseout = oMarkRight.onmouseout = function () {
      startMove(oBtnNext,'opacity',0);
    };

    //点击小图切换大图
    for(var i=0;i<aLiSmall.length;i++){
        aLiSmall[i].index = i;
        aLiSmall[i].onclick = function () {

          if(now == this.index) return;
          now = this.index;
            tab();
        };

        //鼠标移入移除事件
        aLiSmall[i].onmouseover = function () {
            startMove(this,'opacity',100);
        };
        aLiSmall[i].onmouseout = function () {
            if(now != this.index){
                startMove(this,'opacity',60);
            }
        }

    }
    function tab() {
        aLiBig[now].style.zIndex = nowIndex++;

        for(var i=0;i<aLiSmall.length;i++){
            startMove(aLiSmall[i],'opacity',60);
        }
        startMove(aLiSmall[now],'opacity',100);

        aLiBig[now].style.height = '0';
        startMove(aLiBig[now],'height',320);

        //移动
        if(now==0){
            startMove(oUlSmall,'left',0);
        }
        else if(now == aLiSmall.length-1){
            startMove(oUlSmall,'left',-(now-2)*aLiSmall[0].offsetWidth);
        }
        else {
            startMove(oUlSmall,'left',-(now-1)*aLiSmall[0].offsetWidth);
        }
    }
    //上一张下一张
    oBtnNext.onclick = function () {
        now++;
        if(now == aLiSmall.length){
           now = 0;
        }
        tab();
    };
    oBtnPrev.onclick = function () {
        now--;
        if(now == -1){
            now = aLiSmall.length-1;
        }
        tab();
    };

    var timer = setInterval(oBtnNext.onclick,2000);
    oDiv.onmouseover = function () {
        clearInterval(timer);
    };
    oDiv.onmouseout = function () {
      timer = setInterval(oBtnNext.onclick,2000);
    }

</script>


</body>
</html>